<template>
    <div class="order-detail">
        <div class="order-num">
             <div class="num-msg">
                 <span>订单编号：</span>
                 <span>{{orderMsg['order_num']}}</span>
             </div>
             <div class="num-msg">
                 <span>下单时间：</span>
                 <span>{{orderMsg['create_time']}}</span>
             </div>
             <div class="num-msg">
                 <span>交易状态：</span>
                 <span>{{orderMsg['temStatus']}}</span>
             </div>
        </div>
        <div class="order-address">
            <div class="address-head">
                <span>收货信息</span>
            </div>
            <div class="address-msg">
                <div class="num-msg">
                    <span>收货人：</span>
                    <span>{{orderMsg['name']}}</span>
                </div>
                <div class="num-msg">
                    <span>联系方式：</span>
                    <span>{{orderMsg['phone']}}</span>
                </div>
                <div class="num-msg">
                    <span>收货地址：</span>
                    <span>{{orderMsg['address']}}</span>
                </div>
            </div>
        </div>
        <div class="order-goods">
            <div class="goods-head">
                <span>商品信息</span>
            </div>
            <div class="goods-msg">
                <img :src="orderMsg['imgUrl']" alt="">
                <div class="msg-box">
                    <span>{{orderMsg['goods_name']}}</span>
                    <span>
                        <span v-for="(subItem,i) in orderMsg['attributes']" :key="i">{{subItem['attributes']}} </span>
                    </span>
                    <span>￥{{orderMsg['price']}} x {{orderMsg['number']}}</span>
                </div>
            </div>
            <a class="contact" href='tel:12345678911'>
                <span>联系客服</span>
            </a>
        </div>
        <div class="order-pay">
            <div class="address-head">
                <span>支付信息</span>
            </div>
            <div class="address-msg">
                <div class="num-msg">
                    <span>商品总额：</span>
                    <span>￥{{orderMsg['total_money']}}</span>
                </div>
                <div class="num-msg">
                    <span>运费：</span>
                    <span>+￥{{orderMsg['postage']}}</span>
                </div>
                <div class="num-msg">
                    <span>优惠：</span>
                    <span>-￥{{orderMsg['voucher']}}</span>
                </div>
            </div>
            <div class="total-btn">
                <span>实付金额：</span>
                <span>￥{{orderMsg['pay_money']}}元</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:'orderDetail',
    data(){
        return {
            orderMsg:{}
        }
    },
    methods:{
        getStoreDetail(){
            let that = this;
            let token = localStorage.getItem('token');
            let id = this.$route.query.orderId;
            let loader = that.loading();
            that.$ajax(that, 'post', that.$api.orderDetail, {'order_id':id}, token, function(res){
                that.orderMsg = res.data.msg;
                let temObj = {
                    1:'未付款',
                    2:'已付款',
                    3:'已发货',
                    4:'退货中',
                    5:'退货完成',
                    6:'交易完成',
                    7:'交易关闭',
                    8:'交易取消'
                }
                that.orderMsg.temStatus = temObj[that.orderMsg['order_status']];
                that.orderMsg.imgUrl = that.$api.URL+that.orderMsg['image_url'];
                if(that.orderMsg['voucher'] == null){
                    that.orderMsg['voucher'] = 0;
                }
                loader.close();
            })
        }
    },
    mounted(){
        this.$store.state.tab = '订单详情';
        console.log(this.$route);
        this.getStoreDetail();
    },
    activated(){
        this.$store.state.tab = '订单详情';
        this.getStoreDetail();
    }
}
</script>

<style lang='less'>
@rem:100rem;

.order-detail{
    width: 750/@rem;
    margin-top: 88/@rem;
    padding-top: 20/@rem;
    padding-bottom: 60/@rem;
    .order-num{
        width: 100%;
        height: 186/@rem;
        background: #ffffff;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        .num-msg{
            margin-top: 20/@rem;
            margin-left: 20/@rem;
            color: #868686;
        }
    }
    .order-address{
        width: 100%;
        margin-top: 20/@rem;
        background: #ffffff;
        .address-head{
            height: 82/@rem;
            line-height: 82/@rem;
            text-align: start;
            padding-left: 20/@rem;
            border-bottom: 1px solid #f0f0f0;
        }
        .address-msg{
            width: 100%;
            height: 240/@rem;
            box-sizing: border-box;
            padding: 0 20/@rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            .num-msg{
                text-align: start;
                display: flex;
                align-items: flex-start;
                color: #868686;
                margin-top: 20/@rem;
                span:nth-of-type(2){
                    display: inline-block;
                    width: 562/@rem;
                }
            }
        }
    }
    .order-goods{
        width: 100%;
        margin-top: 20/@rem;
        background: #ffffff;
        padding-bottom: 30/@rem;
        .goods-head{
            height: 82/@rem;
            line-height: 82/@rem;
            text-align: start;
            padding-left: 20/@rem;
            border-bottom: 1px solid #f0f0f0;
        }
        .goods-msg{
            width: 100%;
            height: 208/@rem;
            display: flex;
            align-items: center;
            img{
                height: 166/@rem;
                width: 166/@rem;
                margin-left: 20/@rem;
            }
            .msg-box{
                display: flex;
                flex-direction: column;
                margin-left: 20/@rem;
                span{
                    text-align: start;
                }
                span:nth-of-type(1){
                    font-size: 28/@rem;
                }
                span:nth-of-type(2),span:nth-of-type(3){
                    margin-top: 30/@rem;
                }
                span:nth-of-type(2){
                    font-size: 20/@rem;
                    color: #868686;
                }
            }
        }
        .contact{
            width: 710/@rem;
            height: 80/@rem;
            display: block;
            background-color: #f8f8f8;
            border-radius: 8/@rem;
            border: 2/@rem solid #e7e7e7;
            margin: 0 auto;
            margin-top: 50/@rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #333;
        }
        .contact:active{
            background: #e6e6e6;
        }
    }
    .order-pay{
        width: 100%;
        margin-top: 20/@rem;
        background: #ffffff;
        .address-head{
            height: 82/@rem;
            line-height: 82/@rem;
            text-align: start;
            padding-left: 20/@rem;
            border-bottom: 1px solid #f0f0f0;
        }
        .address-msg{
            width: 100%;
            height: 240/@rem;
            box-sizing: border-box;
            padding: 0 20/@rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
            border-bottom: 1px solid #f0f0f0;
            .num-msg{
                text-align: start;
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                color: #868686;
                margin-top: 20/@rem;
            }
        }
        .total-btn{
            width: 100%;
            height: 80/@rem;
            box-sizing: border-box;
            padding: 0 20/@rem;
            padding-bottom: 20/@rem;
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
            color: #fd4141;
        }
    }
}
</style>
